<template>
  <div class="teacher-info">
    <Scroll class="teacher-info-container">
      <div>
        <header class="header">
          <svg @click="back" class="icon" aria-hidden="true">
            <use xlink:href="#iconcuowu" />
          </svg>
        </header>
        <div class="card-container">
          <div class="card">
            <div class="avatar">
              <img :src="avatar" />
              <span @click="toggleChangeUserImg">更换头像</span>
            </div>
            <p class="name">HuiAzir</p>
            <p class="introduce">一位神秘的讲师</p>
            <p class="status">
              <span>关注：22</span>
              <span>课程：10</span>
            </p>
          </div>
        </div>
        <div class="form-container">
          <info-form class="form"></info-form>
        </div>
        <ChangUserImg v-show="showChangeUserImg" @close-changeUserImg="toggleChangeUserImg" />
      </div>
    </Scroll>
  </div>
</template>

<script>
import InfoForm from "./components/InfoForm";
import Scroll from "@/commonPages/commonComponents/Scroll";
export default {
  components: {
    ChangUserImg: () => import("./components/ChangeUserImg"),
    InfoForm,
    Scroll
  },
  data() {
    return {
      showChangeUserImg: false
    };
  },
  computed: {
    avatar() {
      return this.$store.state.teacher.userImg;
    }
  },
  methods: {
    toggleChangeUserImg() {
      this.showChangeUserImg = !this.showChangeUserImg;
    },
    back() {
      window.history.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
@media screen and (max-width: 576px) {
  .teacher-info {
    background-color: #fff;
    .header {
      width: 100%;
      height: 40px;
      position: relative;
      .icon {
        position: absolute;
        right: 5%;
        top: 50%;
        margin-top: -10px;
        width: 20px;
        height: 20px;
      }
    }
    .teacher-info-container {
      width: 100%;
      height: 100%;
      .card-container {
        min-height: 100%;
        .card {
          width: 100%;
          background-color: #fff;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-start;
          .avatar {
            position: relative;
            border-radius: 50%;
            overflow: hidden;
            width: 120px;
            height: 120px;
            img {
              width: 100%;
              height: 100%;
            }
            &:hover {
              span {
                opacity: 1;
              }
            }
            span {
              opacity: 0;
              transition: all 0.2s;
              position: absolute;
              cursor: pointer;
              text-align: center;
              width: 100%;
              z-index: 3;
              left: 0;
              height: 20px;
              font-size: 14px;
              line-height: 20px;
              bottom: 15px;
              color: #fff;
              background-color: rgba(0, 0, 0, 0.5);
            }
          }
          p {
            margin: 10px;
            &.name {
              font-size: 18px;
              letter-spacing: 1px;
              color: #455a64;
            }
            &.introduce {
              font-size: 13px;
              color: #99abb4;
            }
            &.status {
              font-size: 15px;
              color: #455a64;
              span {
                margin: 0 20px;
              }
            }
          }
        }
      }
      .form-container {
        box-sizing: border-box;
      }
    }
  }
}
</style>